<template>
  <div id="guest-book">
    <header class="p-20 ">
      <el-input
        placeholder="请输入评论人姓名"
        prefix-icon="el-icon-search"
        class="w-400 m-r-30"
        v-model="selectFrom.name"
        @input="getGuestList"></el-input>
      <el-select 
        @change="getGuestList" 
        v-model="selectFrom.isReply" 
        class="m-r-30"
        clearable
        placeholder="请选择筛选方式"
        collapse-tags>
        <el-option v-for="item in selectStatus" :key="item.label" :label="item.label" :value="item.value"> </el-option>
      </el-select>
      <el-date-picker
        v-model="selectFrom.date"
        @change="getGuestList"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions">
      </el-date-picker>
    </header>
    <main>
      <el-table :data="guestList">
        <el-table-column label="日期" width="150">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.createTime | date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="60">
          <template slot-scope="scope">
             <el-avatar size="medium" :src="scope.row.guestIcon"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.guestName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="留言内容">
          <template slot-scope="scope">
            <span>{{ scope.row.guestContent == ''?'空':scope.row.guestContent }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回复">
          <template slot-scope="scope">
            <span v-if="scope.row._id !== replyId">{{ scope.row.reply==''?'暂无回复':scope.row.reply }}</span>
            <span v-if="scope.row._id == replyId"><el-input size="mini" v-model="scope.row.reply" placeholder="输入回复内容"></el-input></span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" width="160">
          <template slot-scope="scope">
            <span>{{ scope.row.guestEmail }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row._id !== replyId" size="mini" type="text" @click="replyId = scope.row._id">回复</el-button>
            <el-button v-if="scope.row._id == replyId" size="mini" type="text" @click="saveGuest(scope.row)">保存</el-button>
            <el-button v-if="scope.row._id == replyId" size="mini" type="text" @click="replyId = ''">取消</el-button>
            <el-button size="mini" type="text" @click="deleteGuest(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </main>
    <footer class="p-t-15">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="selectFrom.currentPage"
        :page-sizes="pageSizes"
        :page-size="selectFrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum" 
        class="flex flex-space-between">
      </el-pagination>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectFrom: {
        name: '',
        isReply: '',
        date: null,
        pageSize: 10,
        currentPage: 1,
        sort: 'createTime',
      },
      pageSizes: [10, 20, 30, 40, 50],
      selectStatus: [
        {value: false, label: '未回复'},
        {value: true, label: '已回复'},
      ],
      guestList: [],
      totalNum: 0,
      replyId: '',
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  created() {
    this.getGuestList()
  },
  methods: {
    async getGuestList() {
      let res = await this.api.post('/admin/getGuestList', {
        ...this.selectFrom
      })
      if(res.code == 0) {
        this.guestList = res.data.guestList
        this.totalNum = res.data.counts
      }
    },
    editReply(item) {
      this.replyId = item._id 
    },
    async saveGuest(data) {
      if(data.reply == '') {
        this.$message({ message: '评论内容不能为空', type: 'warning', showClose: true, });
      }else {
        let res = await this.api.post('/admin/updateGuestReply', data)
        if(res.code == 0) {
          this.replyId = ''
          this.getGuestList()
        }
      }
    },
    deleteGuest(id) {
      this.$confirm('是否删除此评论！', '标题', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(async (res) => {
        let result = await this.api.get('/admin/deleteGuest', {
          params: { id: id }
        })
        if(result.code == 0) { this.getGuestList()}
      })
      .catch(res => {
        return false
      })
    },
    sizeChange(pageSize) {
      this.selectFrom.pageSize = pageSize
      this.getGuestList()
    },
    currentChange(thisPage) {
      this.selectFrom.currentPage = thisPage
      this.getGuestList()
    },
  },
}
</script>

<style lang="scss">
#guest-book {
  header {
    background: rgb(245, 245, 245);
    .el-date-editor {
      .el-range-separator {
        width: 7%; 
      }
    }
  }
}
</style>